<template>
    <div class="top-option">
        <a 
        class="select-option"
        v-for="item in optArr"
        :class="optionSet.option[item].id === optionSet.active ? 'active' : ''"
        :key="optionSet.option[item].id"
        @click="clickOpt(optionSet.option[item].id)"
        >
            {{optionSet.option[item].name}}
            <span v-show="optionSet.option[item].isDanger" class="warning-icon">●</span>
        </a>
        <div :style="{left: `${lineTopLeft * 33.33}%`}" class="line"></div>
    </div>
</template>

<script>
export default {
    name: 'TopOption',
    props: {
        optionSet: {
            type: Object,
            default: {},
        }
    },
    methods: {
        clickOpt(id) {
            if (id) {
                this.$emit('chooseOpt', id)
            }
        }
    },
    computed: {
        optArr() {
            return Object.keys(this.optionSet.option)
        },
        lineTopLeft() {
            return this.optArr.indexOf(this.optionSet.active)
        },
    }
}
</script>

<style lang="scss" scoped>
.top-option {
    height: 46px;
    width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    align-items: center;
    background: white;
    position: relative;

    .select-option {
        width: 33.33%;
        height: 100%;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        align-items: center;
        color: #999999;
        justify-content: center;

        .warning-icon {
            font-size: 12px;
            font-weight: 100;
            margin-left: 6px;
            color: red;
        }
    }

    .active {
        color: #007bc2;
        font-weight: bold;
    }

    .line {
        position: absolute;
        width: 33.33%;
        height: 2px;
        background: #0077bf;
        left: 0px;
        bottom: -1px;
        transition: left .4s;
    }
}
</style>